<template>
    <div class="pass">
        <!-- 通行证管理 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>编辑住户信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    
    <el-card>
    <div class="height">
        <el-form :label-position="labelPosition" label-width="80px">
            
                <el-form-item label="姓名">
                    <el-input v-model="formInline.user" :disabled="true"></el-input>
                </el-form-item>
           
                <el-form-item label="身份证号">
                    <el-input v-model="formInline.id" :disabled="true"></el-input>
                </el-form-item>
           
                <el-form-item label="年龄">
                    <el-input v-model="formInline.age" :disabled="true"></el-input>
                </el-form-item>
            
                <el-form-item label="性别">
                    <el-select v-model="formInline.sex" placeholder="请选择" :disabled="true">
                        <el-option label="男"></el-option>
                        <el-option label="女"></el-option>
                    </el-select>
                </el-form-item>
           
                <el-form-item label="地址">
                    <el-input v-model="formInline.address" placeholder="修改地址"></el-input>
                </el-form-item>
            
                <el-form-item label="电话号码">
                    <el-input v-model="formInline.phone" placeholder="修改电话号码"></el-input>
                </el-form-item>
           
                <el-form-item label="备注">
                    <el-input v-model="formInline.another" ></el-input>
                </el-form-item>
                <div class="button">
                    <el-form-item>
                <el-button color="red" @click="submitForm">保存</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="back">返回</el-button>
            </el-form-item>
                </div>
            
    
    
        </el-form>
    </div>
</el-card>


</template>

    <script>
export default {
    data() {
        return {
            labelPosition: 'left',
            formInline: {
                user: '',
                region: '',
                value1: new Date(2016, 9, 10, 18, 40),
                value2: new Date(2016, 9, 10, 18, 40),
                age:'',
                address:'',
                sex:'',
                phone:'',
                another:'',
                id:''
            },
            ruleForm: {
                user: '',
                region: '',

                desc: ''
            },
            rules: {
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        back(){
            this.$router.push({
      path: "../views/system"//要跳转的页面的路由
    })
        },
        //查询
        onSubmit() {
            console.log('submit!');
        },
        //提交校验
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }

};
</script>

    <style lang="less" scoped>
    .el-form {
        width: 800px;
    }
    
    .notice {
        margin-top: 10px;
        font-weight: bold;
    }
    
    .height {
        margin-top: 20px;
    }
    .height{
        line-height: 10px;
    }
    .el-input{
        width: 220px;
    }
    .el-card{
        margin-top: 10px;
    }
    .button{
        display: flex;
    }
    </style>
